<template>
    <div>
       <van-nav-bar 
       title="运动服饰" 
       class='van'
       @click-left="onClickLeft"
       @click-right="onClickRight"
       >
            <van-icon name="arrow-left" slot="left" color='black' size='20px'/>
            <van-icon name="cart" slot="right" color='black' size='28px' class='van'/>
        </van-nav-bar>

         <van-icon name="balance-list" slot="right" color='black' size='28px' class='van1' @click='tap'/>

        <ul class='list1'>
            <li v-for='item in list' >
                <router-link :to="'/detail/'+item.pid" >
                  <van-col span="8" offset="1">
                       <van-image
                          width="170"
                          height="170"
                          :src="item.pimg"
                          class='img'
                      />
                  </van-col>
                  </router-link>
                  <van-row>
                  <van-col span="24" offset="1">
                     <span>{{item.pname}}</span>
                  </van-col>
                  </van-row>
                  <van-row>
                  <van-col span="24" offset="1">
                     <span>￥{{item.pprice}}</span>
                  </van-col>
                </van-row>
            </li> 
        </ul>
    </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name:'Fs',
    data () {
        return {
           list:[] 
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        onClickRight(){
            this.$router.push('/cart')
        },
        tap(){
            this.$router.push('/allorder')
        }
        ,
        cp(pid){
          // this.$router.push('/detail/'+pid)
          console.log(pid);
        }
    },
    mounted () {
        var _this=this
        axios({
            method:'get',
            url:'http://jx.xuzhixiang.top/ap/api/productlist.php',
            params:{uid:11003}
        }).then((res)=>{
            console.log(res.data.data)
            _this.list=res.data.data
        })
    }
}
</script>

<style scoped>
.van{
    margin-left:15px;
}
.van1{
    position: fixed;
    left:291px;
    top:11px;
    z-index: 20;
}
.list1{
    width:370px;
    height:450px;
    margin-left:2px;
}
.list1 li{
    float: left;
    margin-right: 15px;
}
</style>
